<template>
    <div class="language">
      <div class="header">
        <div class="back" @click="handleBack">
            <van-icon name="arrow-left" class="home-icon" />
          </div>
        <div class="title">Language</div>
      </div>
  
      <van-cell-group class="language-list">
        <van-cell 
          v-for="lang in languages" 
          :key="lang.code"
          class="language-item"
          :title="lang.name"
          clickable
          @click="selectLanguage(lang.code)"
        >
        </van-cell>
      </van-cell-group>
    </div>
  </template>
  
  <script setup name="Language">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Cell, CellGroup, Icon } from 'vant';
  import { useI18n } from 'vue-i18n';
  const { locale } = useI18n(); // 获取
  const router = useRouter();
  
  // Language data
  const languages = ref([
    { code: 'en', name: 'English' },
    { code: 'hi', name: 'हिंदी' },
    { code: 'de', name: 'Deutsch' },
    { code: 'ru', name: 'Russian' },
    { code: 'es', name: 'Español' },
    { code: 'zh', name: '简体中文' },
    { code: 'it', name: 'Italian' },
    { code: 'ja', name: '日本語' },
    { code: 'fr', name: 'Français' },
    { code: 'pt', name: 'Portuguese' },
    { code: 'ar', name: 'عربي' }
  ]);
  
  // Get current language from localStorage or default to English

  
  const handleBack = () => {
    router.go(-1);
  };
  
  const selectLanguage = (langCode) => {
    localStorage.setItem("locale", langCode);
    locale.value = langCode; // 更新 i18n 实
    handleBack();
  };
  </script>
  
  <style scoped>
  .language {
    min-height: 100vh;
    background: #f5f5f5;
  }
  
  .header {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f5f5f5;
    position: relative;
  }
  
  .back {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .home-icon {
    width: 22px;
    height: 22px;
    font-weight: bold;
    margin-top: 6px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  
  .language-list {
    margin: 12px;
    background: #f5f5f5;
  }
  
  .language-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px 15px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: center;
  }
  
  .language-item span {
    flex: 1;
    font-size: 15px;
    color: #333;
    text-align: center;
  }
  </style>